﻿<!DOCTYPE html>
<!-- 
Template Name: Marvin




-->
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Marvin I Colors</title>
    <meta name="description" content="A responsive bootstrap 4 admin dashboard template by hencework" />

    <!-- Favicon -->
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- Toggles CSS -->
    <link href="vendors/jquery-toggles/css/toggles.css" rel="stylesheet" type="text/css">
    <link href="vendors/jquery-toggles/css/themes/toggles-light.css" rel="stylesheet" type="text/css">

    <!-- Custom CSS -->
    <link href="dist/css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
    
    
	<!-- HK Wrapper -->
	<div class="hk-wrapper hk-vertical-nav">

        <!-- Top Navbar -->
        <nav class="navbar navbar-expand-xl navbar-light fixed-top hk-navbar">
            <a id="navbar_toggle_btn" class="navbar-toggle-btn nav-link-hover" href="javascript:void(0);"><span class="feather-icon"><i data-feather="menu"></i></span></a>
            <a class="navbar-brand font-weight-700" href="index.html">
                Marvin
            </a>
            <ul class="navbar-nav hk-navbar-content">
                <li class="nav-item">
                    <a id="navbar_search_btn" class="nav-link nav-link-hover" href="javascript:void(0);"><span class="feather-icon"><i data-feather="search"></i></span></a>
                </li>
                <li class="nav-item">
                    <a id="settings_toggle_btn" class="nav-link nav-link-hover" href="javascript:void(0);"><span class="feather-icon"><i data-feather="settings"></i></span></a>
                </li>
                <li class="nav-item dropdown dropdown-notifications">
                    <a class="nav-link dropdown-toggle no-caret" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="feather-icon"><i data-feather="bell"></i></span><span class="badge-wrap"><span class="badge badge-primary badge-indicator badge-indicator-sm badge-pill pulse"></span></span></a>
                    <div class="dropdown-menu dropdown-menu-right" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
                        <h6 class="dropdown-header">Notifications <a href="javascript:void(0);" class="">View all</a></h6>
                        <div class="notifications-nicescroll-bar">
                            <a href="javascript:void(0);" class="dropdown-item">
                                <div class="media">
                                    <div class="media-img-wrap">
                                        <div class="avatar avatar-sm">
                                            <img src="dist/img/avatar1.jpg" alt="user" class="avatar-img rounded-circle">
                                        </div>
                                    </div>
                                    <div class="media-body">
                                        <div>
                                            <div class="notifications-text"><span class="text-dark text-capitalize">Evie Ono</span> accepted your invitation to join the team</div>
                                            <div class="notifications-time">12m</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <div class="media">
                                    <div class="media-img-wrap">
                                        <div class="avatar avatar-sm">
                                            <img src="dist/img/avatar2.jpg" alt="user" class="avatar-img rounded-circle">
                                        </div>
                                    </div>
                                    <div class="media-body">
                                        <div>
                                            <div class="notifications-text">New message received from <span class="text-dark text-capitalize">Misuko Heid</span></div>
                                            <div class="notifications-time">1h</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <div class="media">
                                    <div class="media-img-wrap">
                                        <div class="avatar avatar-sm">
                                            <span class="avatar-text avatar-text-primary rounded-circle">
													<span class="initial-wrap"><span><i class="zmdi zmdi-account font-18"></i></span></span>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="media-body">
                                        <div>
                                            <div class="notifications-text">You have a follow up with<span class="text-dark text-capitalize"> Marvin head</span> on <span class="text-dark text-capitalize">friday, dec 19</span> at <span class="text-dark">10.00 am</span></div>
                                            <div class="notifications-time">2d</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <div class="media">
                                    <div class="media-img-wrap">
                                        <div class="avatar avatar-sm">
                                            <span class="avatar-text avatar-text-success rounded-circle">
													<span class="initial-wrap"><span>A</span></span>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="media-body">
                                        <div>
                                            <div class="notifications-text">Application of <span class="text-dark text-capitalize">Sarah Williams</span> is waiting for your approval</div>
                                            <div class="notifications-time">1w</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <div class="media">
                                    <div class="media-img-wrap">
                                        <div class="avatar avatar-sm">
                                            <span class="avatar-text avatar-text-warning rounded-circle">
													<span class="initial-wrap"><span><i class="zmdi zmdi-notifications font-18"></i></span></span>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="media-body">
                                        <div>
                                            <div class="notifications-text">Last 2 days left for the project</div>
                                            <div class="notifications-time">15d</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </li>
                <li class="nav-item dropdown dropdown-authentication">
                    <a class="nav-link dropdown-toggle no-caret" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <div class="media">
                            <div class="media-img-wrap">
                                <div class="avatar">
                                    <img src="dist/img/avatar12.jpg" alt="user" class="avatar-img rounded-circle">
                                </div>
                                <span class="badge badge-success badge-indicator"></span>
                            </div>
                            <div class="media-body">
                                <span>Madelyn Shane<i class="zmdi zmdi-chevron-down"></i></span>
                            </div>
                        </div>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right" data-dropdown-in="flipInX" data-dropdown-out="flipOutX">
                        <a class="dropdown-item" href="profile.html"><i class="dropdown-icon zmdi zmdi-account"></i><span>Profile</span></a>
                        <a class="dropdown-item" href="#"><i class="dropdown-icon zmdi zmdi-card"></i><span>My balance</span></a>
                        <a class="dropdown-item" href="inbox.html"><i class="dropdown-icon zmdi zmdi-email"></i><span>Inbox</span></a>
                        <a class="dropdown-item" href="#"><i class="dropdown-icon zmdi zmdi-settings"></i><span>Settings</span></a>
                        <div class="dropdown-divider"></div>
                        <div class="sub-dropdown-menu show-on-hover">
                            <a href="#" class="dropdown-toggle dropdown-item no-caret"><i class="zmdi zmdi-check text-success"></i>Online</a>
                            <div class="dropdown-menu open-left-side">
                                <a class="dropdown-item" href="#"><i class="dropdown-icon zmdi zmdi-check text-success"></i><span>Online</span></a>
                                <a class="dropdown-item" href="#"><i class="dropdown-icon zmdi zmdi-circle-o text-warning"></i><span>Busy</span></a>
                                <a class="dropdown-item" href="#"><i class="dropdown-icon zmdi zmdi-minus-circle-outline text-danger"></i><span>Offline</span></a>
                            </div>
                        </div>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#"><i class="dropdown-icon zmdi zmdi-power"></i><span>Log out</span></a>
                    </div>
                </li>
            </ul>
        </nav>
        <form role="search" class="navbar-search">
            <div class="position-relative">
                <a href="javascript:void(0);" class="navbar-search-icon"><span class="feather-icon"><i data-feather="search"></i></span></a>
                <input type="text" name="example-input1-group2" class="form-control" placeholder="Type here to Search">
                <a id="navbar_search_close" class="navbar-search-close" href="#"><span class="feather-icon"><i data-feather="x"></i></span></a>
            </div>
        </form>
        <!-- /Top Navbar -->

        <!-- Vertical Nav -->
        <nav class="hk-nav hk-nav-dark">
            <a href="javascript:void(0);" id="hk_nav_close" class="hk-nav-close"><span class="feather-icon"><i data-feather="x"></i></span></a>
            <div class="nicescroll-bar">
                <div class="navbar-nav-wrap">
                    <ul class="navbar-nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#dash_drp">
                                <span class="feather-icon"><i data-feather="activity"></i></span>
                                <span class="nav-link-text">Dashboard</span>
                            </a>
                            <ul id="dash_drp" class="nav flex-column collapse collapse-level-1">
                                <li class="nav-item">
                                    <ul class="nav flex-column">
                                        <li class="nav-item">
                                            <a class="nav-link" href="index.html">CRM</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="dashboard2.html">Project</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="dashboard3.html">Statistics</a>
                                        </li>
									
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link link-with-badge" href="javascript:void(0);" data-toggle="collapse" data-target="#app_drp">
                                <span class="feather-icon"><i data-feather="package"></i></span>
                                <span class="nav-link-text">Application</span>
                                <span class="badge badge-primary badge-pill">4</span>
                            </a>
                            <ul id="app_drp" class="nav flex-column collapse collapse-level-1">
                                <li class="nav-item">
                                    <ul class="nav flex-column">
                                        <li class="nav-item">
                                            <a class="nav-link" href="chats.html">Chat</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="calendar.html">Calendar</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="email.html">Email</a>
                                        </li>
										<li class="nav-item">
                                            <a class="nav-link" href="file-manager.html">File Manager</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#auth_drp">
                                <span class="feather-icon"><i data-feather="zap"></i></span>
                                <span class="nav-link-text">Authentication</span>
                            </a>
                            <ul id="auth_drp" class="nav flex-column collapse collapse-level-1">
                                <li class="nav-item">
                                    <ul class="nav flex-column">
                                        <li class="nav-item">
                                            <a class="nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#signup_drp">
													Sign Up
												</a>
                                            <ul id="signup_drp" class="nav flex-column collapse collapse-level-2">
                                                <li class="nav-item">
                                                    <ul class="nav flex-column">
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="signup.html">Cover</a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="signup-simple.html">Simple</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#signin_drp">
													Login
												</a>
                                            <ul id="signin_drp" class="nav flex-column collapse collapse-level-2">
                                                <li class="nav-item">
                                                    <ul class="nav flex-column">
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="login.html">Cover</a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="login-simple.html">Simple</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#recover_drp">
													Recover Password
												</a>
                                            <ul id="recover_drp" class="nav flex-column collapse collapse-level-2">
                                                <li class="nav-item">
                                                    <ul class="nav flex-column">
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="forgot-password.html">Forgot Password</a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" href="reset-password.html">Reset Password</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="lock-screen.html">Lock Screen</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="404.html">Error 404</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="maintenance.html">Maintenance</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#pages_drp">
                                <span class="feather-icon"><i data-feather="file-text"></i></span>
                                <span class="nav-link-text">Pages</span>
                            </a>
                            <ul id="pages_drp" class="nav flex-column collapse collapse-level-1">
                                <li class="nav-item">
                                    <ul class="nav flex-column">
                                        <li class="nav-item">
                                            <a class="nav-link" href="profile.html">Profile</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="invoice.html">Invoice</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="gallery.html">Gallery</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="activity.html">Activity</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="faq.html">Faq</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <hr class="nav-separator">
                    <div class="nav-header">
                        <span>User Interface</span>
                        <span>UI</span>
                    </div>
                    <ul class="navbar-nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#Components_drp">
                                <span class="feather-icon"><i data-feather="layout"></i></span>
                                <span class="nav-link-text">Components</span>
                            </a>
                            <ul id="Components_drp" class="nav flex-column collapse collapse-level-1">
                                <li class="nav-item">
                                    <ul class="nav flex-column">
                                        <li class="nav-item">
                                            <a class="nav-link" href="alerts.html">Alerts</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="avatar.html">Avatar</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="badge.html">Badge</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="buttons.html">Buttons</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="cards.html">Cards</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="carousel.html">Carousel</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="collapse.html">Collapse</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="dropdowns.html">Dropdown</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="list-group.html">List Group</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="modal.html">Modal</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="nav.html">Nav</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="navbar.html">Navbar</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="nestable.html">Nestable</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="pagination.html">Pagination</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="popovers.html">Popovers</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="progress.html">Progress</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="tooltip.html">Tooltip</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#content_drp">
                                <span class="feather-icon"><i data-feather="type"></i></span>
                                <span class="nav-link-text">Content</span>
                            </a>
                            <ul id="content_drp" class="nav flex-column collapse collapse-level-1">
                                <li class="nav-item">
                                    <ul class="nav flex-column">
                                        <li class="nav-item">
                                            <a class="nav-link" href="typography.html">Typography</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="images.html">Images</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="media-object.html">Media Object</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#utilities_drp">
                                <span class="feather-icon"><i data-feather="anchor"></i></span>
                                <span class="nav-link-text">Utilities</span>
                            </a>
                            <ul id="utilities_drp" class="nav flex-column collapse collapse-level-1">
                                <li class="nav-item">
                                    <ul class="nav flex-column">
                                        <li class="nav-item">
                                            <a class="nav-link" href="background.html">Background</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="border.html">Border</a>
                                        </li>
                                        <li class="nav-item active">
                                            <a class="nav-link" href="colors.html">Colors</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="embeds.html">Embeds</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="icons.html">Icons</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="shadow.html">Shadow</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="sizing.html">Sizing</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="spacing.html">Spacing</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#forms_drp">
                                <span class="feather-icon"><i data-feather="server"></i></span>
                                <span class="nav-link-text">Forms</span>
                            </a>
                            <ul id="forms_drp" class="nav flex-column collapse collapse-level-1">
                                <li class="nav-item">
                                    <ul class="nav flex-column">
                                        <li class="nav-item">
                                            <a class="nav-link" href="form-element.html">Form Elements</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="input-groups.html">Input Groups</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="form-layout.html">Form Layout</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="form-mask.html">Form Mask</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="form-validation.html">Form Validation</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="form-wizard.html">Form Wizard</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="file-upload.html">File Upload</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="editor.html">Editor</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#tables_drp">
                                <span class="feather-icon"><i data-feather="list"></i></span>
                                <span class="nav-link-text">Tables</span>
                            </a>
                            <ul id="tables_drp" class="nav flex-column collapse collapse-level-1">
                                <li class="nav-item">
                                    <ul class="nav flex-column">
                                        <li class="nav-item">
                                            <a class="nav-link" href="basic-table.html">Basic Table</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="data-table.html">Data Table</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="responsive-table.html">Responsive Table</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="editable-table.html">Editable Table</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#charts_drp">
                                <span class="feather-icon"><i data-feather="pie-chart"></i></span>
                                <span class="nav-link-text">Charts</span>
                            </a>
                            <ul id="charts_drp" class="nav flex-column collapse collapse-level-1">
                                <li class="nav-item">
                                    <ul class="nav flex-column">
                                        <li class="nav-item">
                                            <a class="nav-link" href="line-charts.html">Line Chart</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="area-charts.html">Area Chart</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="bar-charts.html">Bar Chart</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="pie-charts.html">Pie Chart</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="realtime-charts.html">Realtime Chart</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="mini-charts.html">Mini Chart</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#maps_drp">
                                <span class="feather-icon"><i data-feather="map"></i></span>
                                <span class="nav-link-text">Maps</span>
                            </a>
                            <ul id="maps_drp" class="nav flex-column collapse collapse-level-1">
                                <li class="nav-item">
                                    <ul class="nav flex-column">
                                        <li class="nav-item">
                                            <a class="nav-link" href="google-map.html">Google Map</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="vector-map.html">Vector Map</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <hr class="nav-separator">
                    <div class="nav-header">
                        <span>Getting Started</span>
                        <span>GS</span>
                    </div>
                    <ul class="navbar-nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="documentation.html" >
                                <span class="feather-icon"><i data-feather="book"></i></span>
                                <span class="nav-link-text">Documentation</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link link-with-badge" href="#">
                                <span class="feather-icon"><i data-feather="eye"></i></span>
                                <span class="nav-link-text">Changelog</span>
                                <span class="badge badge-sm badge-danger badge-pill">v 1.0</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <span class="feather-icon"><i data-feather="headphones"></i></span>
                                <span class="nav-link-text">Support</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div id="hk_nav_backdrop" class="hk-nav-backdrop"></div>
        <!-- /Vertical Nav -->

        <!-- Setting Panel -->
        <div class="hk-settings-panel">
            <div class="nicescroll-bar position-relative">
                <div class="settings-panel-wrap">
                    <div class="settings-panel-head">
                        <a href="javascript:void(0);" id="settings_panel_close" class="settings-panel-close"><span class="feather-icon"><i data-feather="x"></i></span></a>
                    </div>
                    <hr>
                    
                    <h6 class="mb-5">Navigation</h6>
                    <p class="font-14">Menu comes in two modes: dark & light</p>
                    <div class="button-list hk-nav-select mb-10">
                        <button type="button" id="nav_light_select" class="btn btn-outline-light btn-sm btn-wth-icon icon-wthot-bg"><span class="icon-label"><i class="fa fa-sun-o"></i> </span><span class="btn-text">Light Mode</span></button>
                        <button type="button" id="nav_dark_select" class="btn btn-outline-primary btn-sm btn-wth-icon icon-wthot-bg"><span class="icon-label"><i class="fa fa-moon-o"></i> </span><span class="btn-text">Dark Mode</span></button>
                    </div>
                    <hr>
                    <h6 class="mb-5">Top Nav</h6>
                    <p class="font-14">Choose your liked color mode</p>
                    <div class="button-list hk-navbar-select mb-10">
                        <button type="button" id="navtop_light_select" class="btn btn-outline-light btn-sm btn-wth-icon icon-wthot-bg"><span class="icon-label"><i class="fa fa-sun-o"></i> </span><span class="btn-text">Light Mode</span></button>
                        <button type="button" id="navtop_dark_select" class="btn btn-outline-primary btn-sm btn-wth-icon icon-wthot-bg"><span class="icon-label"><i class="fa fa-moon-o"></i> </span><span class="btn-text">Dark Mode</span></button>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between align-items-center">
                        <h6>Scrollable Header</h6>
                        <div class="toggle toggle-sm toggle-simple toggle-light toggle-bg-primary scroll-nav-switch"></div>
                    </div>
                    <button id="reset_settings" class="btn btn-primary btn-block btn-reset mt-30">Reset</button>
                </div>
            </div>
            <img class="d-none" src="dist/img/logo-light.png" alt="brand" />
            <img class="d-none" src="dist/img/logo-dark.png" alt="brand" />
        </div>
        <!-- /Setting Panel -->

        <!-- Main Content -->
        <div class="hk-pg-wrapper">
            <!-- Breadcrumb -->
            <nav class="hk-breadcrumb" aria-label="breadcrumb">
                <ol class="breadcrumb breadcrumb-light bg-transparent">
                    <li class="breadcrumb-item"><a href="#">Utilities</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Colors</li>
                </ol>
            </nav>
            <!-- /Breadcrumb -->

            <!-- Container -->
            <div class="container">
                <!-- Title -->
                <div class="hk-pg-header">
                    <h4 class="hk-pg-title"><span class="pg-title-icon"><span class="feather-icon"><i data-feather="command"></i></span></span>Colors</h4>
                </div>
                <!-- /Title -->

                <!-- Row -->
                <div class="row">
                    <div class="col-xl-12">
                        <section class="hk-sec-wrapper">
                            <h5 class="hk-sec-title">Color palette</h5>
                            <p class="mb-40">This color palette comprises 22 base colors and respective dark & light shades providing plenty room to play around. They’ve been designed to work harmoniously with each other. All the colors can be used as<a href="http://www.bootstrapmb.comtheme/Marvin/backgrounds.html"> backgrounds</a> and base colors can be used as text colors.</p>
                            <div class="row">
                                <div class="col-sm">
                                    <div class="row">
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-red-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">red-light-5</span>
                                                        <span class="text-dark font-14">#fff1f1</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-red-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">red-light-4</span>
                                                        <span class="text-dark font-14">#fdc5c3</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-red-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">red-light-3</span>
                                                        <span class="text-white font-14">#fb9f9b</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-red-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">red-light-2</span>
                                                        <span class="text-white font-14">#fa7d77</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-red-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">red-light-1</span>
                                                        <span class="text-white font-14">#f95851</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-red">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-weight-600">Danger color</span>
                                                        <span class="text-white font-weight-600">#f83f37</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Red</span>
                                                </div>
                                                <div class="color-wrap bg-red-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">red-dark-1</span>
                                                        <span class="text-white font-14">#ff2f26</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-red-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">red-dark-2</span>
                                                        <span class="text-white font-14">#ed1622</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-red-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">red-dark-3</span>
                                                        <span class="text-white font-14">#cf020d</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-red-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">red-dark-4</span>
                                                        <span class="text-white font-14">#b10911</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-red-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">red-dark-5</span>
                                                        <span class="text-white font-14">#8b0c12</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-pink-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">pink-light-5</span>
                                                        <span class="text-dark font-14">#feeff4</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-pink-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">pink-light-4</span>
                                                        <span class="text-dark font-14">#fabacf</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-pink-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">pink-light-3</span>
                                                        <span class="text-white font-14">#f68daf</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-pink-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">pink-light-2</span>
                                                        <span class="text-white font-14">#f36493</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-pink-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">pink-light-1</span>
                                                        <span class="text-white font-14">#ef3975</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-pink">
                                                    <div class="d-flex justify-content-end">
                                                        <span class="text-white font-weight-600">#ed1b60</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Pink</span>
                                                </div>
                                                <div class="color-wrap bg-pink-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">pink-dark-1</span>
                                                        <span class="text-white font-14">#df195f</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-pink-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">pink-dark-2</span>
                                                        <span class="text-white font-14">#be1b54</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-pink-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">pink-dark-3</span>
                                                        <span class="text-white font-14">#a7194b</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-pink-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">pink-dark-4</span>
                                                        <span class="text-white font-14">#90143f</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-pink-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">pink-dark-5</span>
                                                        <span class="text-white font-14">#6f1333</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-purple-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">purple-light-5</span>
                                                        <span class="text-dark font-14">#f9f0f9</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-purple-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">purple-light-4</span>
                                                        <span class="text-dark font-14">#e6bde5</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-purple-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">purple-light-3</span>
                                                        <span class="text-white font-14">#d592d4</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-purple-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">purple-light-2</span>
                                                        <span class="text-white font-14">#c66cc5</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-purple-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">purple-light-1</span>
                                                        <span class="text-white font-14">#b642b5</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-purple">
                                                    <div class="d-flex justify-content-end">
                                                        <span class="text-white font-weight-600">#ab26aa</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Purple</span>
                                                </div>
                                                <div class="color-wrap bg-purple-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">purple-dark-1</span>
                                                        <span class="text-white font-14">#9a3092</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-purple-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">purple-dark-2</span>
                                                        <span class="text-white font-14">#882787</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-purple-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">purple-dark-3</span>
                                                        <span class="text-white font-14">#7c2181</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-purple-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">purple-dark-4</span>
                                                        <span class="text-white font-14">#701b76</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-purple-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">purple-dark-5</span>
                                                        <span class="text-white font-14">#5d1864</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-violet-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">violet-light-5</span>
                                                        <span class="text-dark font-14">#f4f2fa</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-violet-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">violet-light-4</span>
                                                        <span class="text-dark font-14">#d1c5e8</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-violet-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">violet-light-3</span>
                                                        <span class="text-white font-14">#b29fd8</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-violet-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">violet-light-2</span>
                                                        <span class="text-white font-14">#977dcb</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-violet-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">violet-light-1</span>
                                                        <span class="text-white font-14">#7a59bc</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-violet">
                                                    <div class="d-flex justify-content-end">
                                                        <span class="text-white font-weight-600">#6640b2</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Violet</span>
                                                </div>
                                                <div class="color-wrap bg-violet-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">violet-dark-1</span>
                                                        <span class="text-white font-14">#603bab</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-violet-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">violet-dark-2</span>
                                                        <span class="text-white font-14">#5935a3</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-violet-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">violet-dark-3</span>
                                                        <span class="text-white font-14">#482e7e</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-violet-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">violet-dark-4</span>
                                                        <span class="text-white font-14">#3a196c</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-violet-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">violet-dark-5</span>
                                                        <span class="text-white font-14">#2d1453</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-indigo-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">indigo-light-5</span>
                                                        <span class="text-dark font-14">#f1f3f9</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-indigo-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">indigo-light-4</span>
                                                        <span class="text-dark font-14">#c4cce7</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-indigo-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">indigo-light-3</span>
                                                        <span class="text-white font-14">#9caad8</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-indigo-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">indigo-light-2</span>
                                                        <span class="text-white font-14">#798cca</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-indigo-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">indigo-light-1</span>
                                                        <span class="text-white font-14">#536bbb</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-indigo">
                                                    <div class="d-flex justify-content-end">
                                                        <span class="text-white font-weight-600">#3a55b1</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Indigo</span>
                                                </div>
                                                <div class="color-wrap bg-indigo-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">indigo-dark-1</span>
                                                        <span class="text-white font-14">#3650ab</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-indigo-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">indigo-dark-2</span>
                                                        <span class="text-white font-14">#2f4595</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-indigo-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">indigo-dark-3</span>
                                                        <span class="text-white font-14">#273c87</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-indigo-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">indigo-dark-4</span>
                                                        <span class="text-white font-14">#002663</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-indigo-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">indigo-dark-5</span>
                                                        <span class="text-white font-14">#0a2042</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-blue-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">blue-light-5</span>
                                                        <span class="text-dark font-14">#edf7fe</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-blue-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">blue-light-4</span>
                                                        <span class="text-dark font-14">#b2defa</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-blue-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">blue-light-3</span>
                                                        <span class="text-white font-14">#7fc8f6</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-blue-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">blue-light-2</span>
                                                        <span class="text-white font-14">#52b5f3</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-blue-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">blue-light-1</span>
                                                        <span class="text-white font-14">#21a0f0</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-blue">
                                                    <div class="d-flex justify-content-end">
                                                        <span class="text-white font-weight-600">#0092ee</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Blue</span>
                                                </div>
                                                <div class="color-wrap bg-blue-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">blue-dark-1</span>
                                                        <span class="text-white font-14">#0089e0</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-blue-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">blue-dark-2</span>
                                                        <span class="text-white font-14">#007fd0</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-blue-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">blue-dark-3</span>
                                                        <span class="text-white font-14">#0768a5</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-blue-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">blue-dark-4</span>
                                                        <span class="text-white font-14">#004f82</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-blue-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">blue-dark-5</span>
                                                        <span class="text-white font-14">#044067</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-sky-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">sky-light-5</span>
                                                        <span class="text-dark font-14">#edf9fe</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-sky-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">sky-light-4</span>
                                                        <span class="text-dark font-14">#b2e6fa</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-sky-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">sky-light-3</span>
                                                        <span class="text-white font-14">#7fd5f7</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-sky-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">sky-light-2</span>
                                                        <span class="text-white font-14">#52c7f5</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-sky-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">sky-light-1</span>
                                                        <span class="text-white font-14">#21b7f2</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-sky">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-weight-600">Primary color</span>
                                                        <span class="text-white font-weight-600">#00acf0</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Sky</span>
                                                </div>
                                                <div class="color-wrap bg-sky-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">sky-dark-1</span>
                                                        <span class="text-white font-14">#00a0df</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-sky-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">sky-dark-2</span>
                                                        <span class="text-white font-14">#0293c9</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-sky-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">sky-dark-3</span>
                                                        <span class="text-white font-14">#0285b4</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-sky-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">sky-dark-4</span>
                                                        <span class="text-white font-14">#02729a</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-sky-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">sky-dark-5</span>
                                                        <span class="text-white font-14">#075875</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-cyan-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">cyan-light-5</span>
                                                        <span class="text-dark font-14">#effafb</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-cyan-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">cyan-light-4</span>
                                                        <span class="text-dark font-14">#bbebf0</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-cyan-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">cyan-light-3</span>
                                                        <span class="text-white font-14">#8edde6</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-cyan-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">cyan-light-2</span>
                                                        <span class="text-white font-14">#66d2dd</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-cyan-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">cyan-light-1</span>
                                                        <span class="text-white font-14">#3bc5d3</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-cyan">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-weight-600">info color</span>
                                                        <span class="text-white font-weight-600">#1ebccd</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Cyan</span>
                                                </div>
                                                <div class="color-wrap bg-cyan-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">cyan-dark-1</span>
                                                        <span class="text-white font-14">#16a9b9</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-cyan-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">cyan-dark-2</span>
                                                        <span class="text-white font-14">#0e949f</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-cyan-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">cyan-dark-3</span>
                                                        <span class="text-white font-14">#0b858f</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-cyan-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">cyan-dark-4</span>
                                                        <span class="text-white font-14">#046b73</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-cyan-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">cyan-dark-5</span>
                                                        <span class="text-white font-14">#065459</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-teal-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">teal-light-5</span>
                                                        <span class="text-dark font-14">#edf8f6</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-teal-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">teal-light-4</span>
                                                        <span class="text-dark font-14">#b2e1da</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-teal-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">teal-light-3</span>
                                                        <span class="text-white font-14">#7fcdc1</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-teal-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">teal-light-2</span>
                                                        <span class="text-white font-14">#52bbac</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-teal-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">teal-light-1</span>
                                                        <span class="text-white font-14">#21a894</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-teal">
                                                    <div class="d-flex justify-content-end">
                                                        <span class="text-white font-weight-600">#009b84</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Teal</span>
                                                </div>
                                                <div class="color-wrap bg-teal-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">teal-dark-1</span>
                                                        <span class="text-white font-14">#018975</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-teal-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">teal-dark-2</span>
                                                        <span class="text-white font-14">#028068</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-teal-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">teal-dark-3</span>
                                                        <span class="text-white font-14">#026f58</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-teal-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">teal-dark-4</span>
                                                        <span class="text-white font-14">#02624f</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-teal-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">teal-dark-5</span>
                                                        <span class="text-white font-14">#044b3b</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-green-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">green-light-5</span>
                                                        <span class="text-dark font-14">#eff9f2</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-green-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">green-light-4</span>
                                                        <span class="text-dark font-14">#bce7c7</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-green-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">green-light-3</span>
                                                        <span class="text-white font-14">#90d7a3</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-green-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">green-light-2</span>
                                                        <span class="text-white font-14">#69c982</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-green-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">green-light-1</span>
                                                        <span class="text-white font-14">#3fb95f</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-green">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-weight-600">Success color</span>
                                                        <span class="text-white font-weight-600">#22af47</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Green</span>
                                                </div>
                                                <div class="color-wrap bg-green-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">green-dark-1</span>
                                                        <span class="text-white font-14">#1aa23e</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-green-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white  font-14">green-dark-2</span>
                                                        <span class="text-white font-14">#179237</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-green-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">green-dark-3</span>
                                                        <span class="text-white font-14">#138431</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-green-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">green-dark-4</span>
                                                        <span class="text-white font-14">#056b33</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-green-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">green-dark-5</span>
                                                        <span class="text-white font-14">#05592b</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-neon-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">neon-light-5</span>
                                                        <span class="text-dark font-14">#f3f9ec</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-neon-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">neon-light-4</span>
                                                        <span class="text-dark font-14">#dbedc6</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-neon-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">neon-light-3</span>
                                                        <span class="text-white font-14">#c3e0a0</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-neon-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">neon-light-2</span>
                                                        <span class="text-white font-14">#aed67e</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-neon-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">neon-light-1</span>
                                                        <span class="text-white font-14">#97ca5a</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-neon">
                                                    <div class="d-flex justify-content-end">
                                                        <span class="text-white font-weight-600">#88c241</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Neon</span>
                                                </div>
                                                <div class="color-wrap bg-neon-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">neon-dark-1</span>
                                                        <span class="text-white font-14">#79b62f</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-neon-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">neon-dark-2</span>
                                                        <span class="text-white font-14">#67a41c</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-neon-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">neon-dark-3</span>
                                                        <span class="text-white font-14">#59970e</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-neon-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">neon-dark-4</span>
                                                        <span class="text-white font-14">#4c7f16</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-neon-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">neon-dark-5</span>
                                                        <span class="text-white font-14">#3d680f</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-lime-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">lime-light-5</span>
                                                        <span class="text-dark font-14">#f9faeb</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-lime-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">lime-light-4</span>
                                                        <span class="text-dark font-14">#f1f4d0</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-lime-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">lime-light-3</span>
                                                        <span class="text-white font-14">#e7ecb0</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-lime-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">lime-light-2</span>
                                                        <span class="text-white font-14">#dfe594</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-lime-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">lime-light-1</span>
                                                        <span class="text-white font-14">#d6de76</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-lime">
                                                    <div class="d-flex justify-content-end">
                                                        <span class="text-white font-weight-600">#d0d962</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Lime</span>
                                                </div>
                                                <div class="color-wrap bg-lime-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">lime-dark-1</span>
                                                        <span class="text-white font-14">#c3cc34</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-lime-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">lime-dark-2</span>
                                                        <span class="text-white font-14">#b7c11a</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-lime-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">lime-dark-3</span>
                                                        <span class="text-white font-14">#9ea809</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-lime-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">lime-dark-4</span>
                                                        <span class="text-white font-14">#878b09</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-lime-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">lime-dark-5</span>
                                                        <span class="text-white font-14">#6f7208</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-sun-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">sun-light-5</span>
                                                        <span class="text-dark font-14">#fffbe5</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-sun-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">sun-light-4</span>
                                                        <span class="text-dark font-14">#fef7c2</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-sun-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">sun-light-3</span>
                                                        <span class="text-dark font-14">#fef19a</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-sun-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">sun-light-2</span>
                                                        <span class="text-dark font-14">#feec76</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-sun-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">sun-light-1</span>
                                                        <span class="text-dark font-14">#fde74f</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-sun">
                                                    <div class="d-flex justify-content-end">
                                                        <span class="text-dark font-weight-600">#fde335</span>
                                                    </div>
                                                    <span class="text-dark font-24 font-weight-600 pt-50 d-block">Sun</span>
                                                </div>
                                                <div class="color-wrap bg-sun-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">sun-dark-1</span>
                                                        <span class="text-white font-14">#ecd11e</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-sun-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">sun-dark-2</span>
                                                        <span class="text-white font-14">#dfc414</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-sun-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">sun-dark-3</span>
                                                        <span class="text-white font-14">#cdb308</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-sun-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">sun-dark-4</span>
                                                        <span class="text-white font-14">#bca300</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-sun-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">sun-dark-5</span>
                                                        <span class="text-white font-14">#a48f03</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-yellow-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">yellow-light-5</span>
                                                        <span class="text-dark font-14">#fff8eb</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-yellow-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">yellow-light-4</span>
                                                        <span class="text-dark font-14">#ffecc2</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-yellow-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">yellow-light-3</span>
                                                        <span class="text-dark font-14">#ffdf9a</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-yellow-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">yellow-light-2</span>
                                                        <span class="text-dark font-14">#ffd477</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-yellow-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">yellow-light-1</span>
                                                        <span class="text-dark font-14">#ffc750</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-yellow">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-weight-600">Warning color</span>
                                                        <span class="text-white font-weight-600">#ffbf36</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Yellow</span>
                                                </div>
                                                <div class="color-wrap bg-yellow-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">yellow-dark-1</span>
                                                        <span class="text-white font-14">#ffb71d</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-yellow-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">yellow-dark-2</span>
                                                        <span class="text-white font-14">#ffac19</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-yellow-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">yellow-dark-3</span>
                                                        <span class="text-white font-14">#faa000</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-yellow-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">yellow-dark-4</span>
                                                        <span class="text-white font-14">#eb9000</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-yellow-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">yellow-dark-5</span>
                                                        <span class="text-white font-14">#cb7e03</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-orange-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">orange-light-5</span>
                                                        <span class="text-dark font-14">#fff4e9</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-orange-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">orange-light-4</span>
                                                        <span class="text-dark font-14">#ffdfbe</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-orange-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">orange-light-3</span>
                                                        <span class="text-dark font-14">#ffca93</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-orange-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">orange-light-2</span>
                                                        <span class="text-white font-14">#ffb76d</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-orange-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">orange-light-1</span>
                                                        <span class="text-white font-14">#ffa344</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-orange">
                                                    <div class="d-flex justify-content-end">
                                                        <span class="text-white font-weight-600">#ff9528</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Orange</span>
                                                </div>
                                                <div class="color-wrap bg-orange-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">orange-dark-1</span>
                                                        <span class="text-white font-14">#ff880e</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-orange-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">orange-dark-2</span>
                                                        <span class="text-white font-14">#ff7800</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-orange-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">orange-dark-3</span>
                                                        <span class="text-white font-14">#f16611</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-orange-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">orange-dark-4</span>
                                                        <span class="text-white font-14">#e05602</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-orange-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">orange-dark-5</span>
                                                        <span class="text-white font-14">#c74c00</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-pumpkin-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">pumpkin-light-5</span>
                                                        <span class="text-dark font-14">#fff4f0</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-pumpkin-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">pumpkin-light-4</span>
                                                        <span class="text-dark font-14">#ffcfbe</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-pumpkin-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">pumpkin-light-3</span>
                                                        <span class="text-white font-14">#ffaf93</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-pumpkin-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">pumpkin-light-2</span>
                                                        <span class="text-white font-14">#ff936d</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-pumpkin-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">pumpkin-light-1</span>
                                                        <span class="text-white font-14">#ff7544</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-pumpkin">
                                                    <div class="d-flex justify-content-end">
                                                        <span class="text-white font-weight-600">#ff6028</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Pumpkin</span>
                                                </div>
                                                <div class="color-wrap bg-pumpkin-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">pumpkin-dark-1</span>
                                                        <span class="text-white font-14">#fb551c</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-pumpkin-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">pumpkin-dark-2</span>
                                                        <span class="text-white font-14">#e8470f</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-pumpkin-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">pumpkin-dark-3</span>
                                                        <span class="text-white font-14">#dd3f08</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-pumpkin-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">pumpkin-dark-4</span>
                                                        <span class="text-white font-14">#c63300</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-pumpkin-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">pumpkin-dark-5</span>
                                                        <span class="text-white font-14">#ac2c00</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-brown-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">brown-light-5</span>
                                                        <span class="text-dark font-14">#f6f3f2</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-brown-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">brown-light-4</span>
                                                        <span class="text-dark font-14">#d7cbc8</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-brown-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">brown-light-3</span>
                                                        <span class="text-white font-14">#bca9a4</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-brown-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">brown-light-2</span>
                                                        <span class="text-white font-14">#a58b84</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-brown-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">brown-light-1</span>
                                                        <span class="text-white font-14">#8b6a61</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-brown">
                                                    <div class="d-flex justify-content-end">
                                                        <span class="text-white font-weight-600">#7a5449</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Brown</span>
                                                </div>
                                                <div class="color-wrap bg-brown-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">brown-dark-1</span>
                                                        <span class="text-white font-14">#6f483d</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-brown-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">brown-dark-2</span>
                                                        <span class="text-white font-14">#633d32</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-brown-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">brown-dark-3</span>
                                                        <span class="text-white font-14">#502f25</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-brown-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">brown-dark-4</span>
                                                        <span class="text-white font-14">#44241b</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-brown-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">brown-dark-5</span>
                                                        <span class="text-white font-14">#301811</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-gold-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">gold-light-5</span>
                                                        <span class="text-dark font-14">#fbf8f1</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-gold-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">gold-light-4</span>
                                                        <span class="text-dark font-14">#ece0c5</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-gold-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">gold-light-3</span>
                                                        <span class="text-dark font-14">#e0cc9f</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-gold-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">gold-light-2</span>
                                                        <span class="text-dark font-14">#d5ba7d</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-gold-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">gold-light-1</span>
                                                        <span class="text-white font-14">#c9a658</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-gold">
                                                    <div class="d-flex justify-content-end">
                                                        <span class="text-white font-weight-600">#c1993f</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Gold</span>
                                                </div>
                                                <div class="color-wrap bg-gold-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">gold-dark-1</span>
                                                        <span class="text-white font-14">#b48c32</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-gold-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">gold-dark-2</span>
                                                        <span class="text-white font-14">#a27b25</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-gold-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">gold-dark-3</span>
                                                        <span class="text-white font-14">#98731e</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-gold-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">gold-dark-4</span>
                                                        <span class="text-white font-14">#85600d</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-gold-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">gold-dark-5</span>
                                                        <span class="text-white font-14">#6d4d05</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-grey-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">grey-light-5</span>
                                                        <span class="text-dark font-14">#f5f5f5</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-grey-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">grey-light-4</span>
                                                        <span class="text-dark font-14">#e2e2e2</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-grey-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">grey-light-3</span>
                                                        <span class="text-white font-14">#cecece</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-grey-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">grey-light-2</span>
                                                        <span class="text-white font-14">#bdbdbd</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-grey-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">grey-light-1</span>
                                                        <span class="text-white font-14">#ababab</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-grey">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-weight-600">Secondary</span>
                                                        <span class="text-white font-weight-600">#9e9e9e</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Grey</span>
                                                </div>
                                                <div class="color-wrap bg-grey-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">grey-dark-1</span>
                                                        <span class="text-white font-14">#919191</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-grey-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">grey-dark-2</span>
                                                        <span class="text-white font-14">#858484</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-grey-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">grey-dark-3</span>
                                                        <span class="text-white font-14">#777474</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-grey-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">grey-dark-4</span>
                                                        <span class="text-white font-14">#666161</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-grey-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">grey-dark-5</span>
                                                        <span class="text-white font-14">#524c4c</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-smoke-light-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">smoke-light-5</span>
                                                        <span class="text-dark font-14">#f4f6f7</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-smoke-light-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">smoke-light-4</span>
                                                        <span class="text-dark font-14">#ced8dc</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-smoke-light-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">smoke-light-3</span>
                                                        <span class="text-white font-14">#aebec4</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-smoke-light-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">smoke-light-2</span>
                                                        <span class="text-white font-14">#92a7b0</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-smoke-light-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">smoke-light-1</span>
                                                        <span class="text-white font-14">#738e99</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-smoke">
                                                    <div class="d-flex justify-content-end">
                                                        <span class="text-white font-weight-600">#5e7d8a</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Smoke</span>
                                                </div>
                                                <div class="color-wrap bg-smoke-dark-1">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">smoke-dark-1</span>
                                                        <span class="text-white font-14">#4a6b78</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-smoke-dark-2">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">smoke-dark-2</span>
                                                        <span class="text-white font-14">#40606d</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-smoke-dark-3">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">smoke-dark-3</span>
                                                        <span class="text-white font-14">#304e5a</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-smoke-dark-4">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">smoke-dark-4</span>
                                                        <span class="text-white font-14">#233c46</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-smoke-dark-5">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">smoke-dark-5</span>
                                                        <span class="text-white font-14">#172a32</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6 mb-30">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-light">
                                                    <div class="d-flex justify-content-end">
                                                        <span class="text-dark font-weight-600">#f5f5f6</span>
                                                    </div>
                                                    <span class="text-dark font-24 font-weight-600 pt-50 d-block">Light</span>
                                                </div>
                                                <div class="color-wrap bg-light-10">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">light-10</span>
                                                        <span class="text-dark font-14">#eaecec</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-light-15">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">light-15</span>
                                                        <span class="text-dark font-14">#e0e3e4</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-light-20">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">light-20</span>
                                                        <span class="text-dark font-14">#d6d9da</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-light-30">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-dark font-14">light-30</span>
                                                        <span class="text-dark font-14">#c1c6c8</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-light-40">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">light-40</span>
                                                        <span class="text-white font-14">#adb3b6</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-light-50">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">light-50</span>
                                                        <span class="text-white font-14">#98a0a3</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-light-60">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">light-60</span>
                                                        <span class="text-white font-14">#848d91</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-light-70">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">light-70</span>
                                                        <span class="text-white font-14">#6f7a7f</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-light-80">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">light-80</span>
                                                        <span class="text-white font-14">#5b676d</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-light-90">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">light-90</span>
                                                        <span class="text-white font-14">#46545a</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-6">
                                            <div class="color-palette-wrap">
                                                <div class="color-wrap bg-dark">
                                                    <div class="d-flex justify-content-end">
                                                        <span class="text-white font-weight-600">#324148</span>
                                                    </div>
                                                    <span class="text-white font-24 font-weight-600 pt-50 d-block">Dark</span>
                                                </div>
                                                <div class="color-wrap bg-dark-20">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">dark-20</span>
                                                        <span class="text-white font-14">#2b383e</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-dark-40">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">dark-40</span>
                                                        <span class="text-white font-14">#273238</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-dark-60">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">dark-60</span>
                                                        <span class="text-white font-14">#212a2f</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-dark-80">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">dark-80</span>
                                                        <span class="text-white font-14">#1a2225</span>
                                                    </div>
                                                </div>
                                                <div class="color-wrap bg-dark-100">
                                                    <div class="d-flex justify-content-between">
                                                        <span class="text-white font-14">dark-100</span>
                                                        <span class="text-white font-14">#0d1113</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
                <!-- /Row -->
            </div>
            <!-- /Container -->

            <!-- Footer -->
            <div class="hk-footer-wrap container">
                <footer class="footer">
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            <p>Pampered by<a href="http://www.bootstrapmb.com" class="text-dark" target="_blank">Hencework</a> © 2019</p>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <p class="d-inline-block">Follow us</p>
                            <a href="#" class="d-inline-block btn btn-icon btn-icon-only btn-indigo btn-icon-style-4"><span class="btn-icon-wrap"><i class="fa fa-facebook"></i></span></a>
                            <a href="#" class="d-inline-block btn btn-icon btn-icon-only btn-indigo btn-icon-style-4"><span class="btn-icon-wrap"><i class="fa fa-twitter"></i></span></a>
                            <a href="#" class="d-inline-block btn btn-icon btn-icon-only btn-indigo btn-icon-style-4"><span class="btn-icon-wrap"><i class="fa fa-google-plus"></i></span></a>
                        </div>
                    </div>
                </footer>
            </div>
            <!-- /Footer -->

        </div>
        <!-- /Main Content -->

    </div>
    <!-- /HK Wrapper -->

    <!-- jQuery -->
    <script src="vendors/jquery/dist/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="vendors/popper.js/dist/umd/popper.min.js"></script>
    <script src="vendors/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- Slimscroll JavaScript -->
    <script src="dist/js/jquery.slimscroll.js"></script>

    <!-- Fancy Dropdown JS -->
    <script src="dist/js/dropdown-bootstrap-extended.js"></script>

    <!-- FeatherIcons JavaScript -->
    <script src="dist/js/feather.min.js"></script>

    <!-- Toggles JavaScript -->
    <script src="vendors/jquery-toggles/toggles.min.js"></script>
    <script src="dist/js/toggle-data.js"></script>

    <!-- Init JavaScript -->
    <script src="dist/js/init.js"></script>

</body>

</html>